
/**
 * @desc 房型设置，新增/修改弹框
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="632px"
    >
      <el-scrollbar v-loading="loading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="Api_POST_RoomCreateDto" class="gl_form_mini" :model="Api_POST_RoomCreateDto" :rules="Api_POST_RoomCreateDto_Rules" label-position="top" label-width="120px" style="padding:0 30px">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="personalUserInfo_img_wrap">
                <el-form-item label="房型图片" prop="imagePath">
                  <el-input v-show="false" v-model.trim="Api_POST_RoomCreateDto.imagePath" />
                  <photo-cropper-dialog
                    ref="photoCropper"
                    class="gl_dialog_TitleLine"
                    auto-crop-width="300px"
                    auto-crop-height="300px"
                    :fixed-number="[213, 200]"
                    :enlarge="1"
                    @photoCropperSave="photoCropperSave"
                  />
                  <div class="upload_game_img" @click="openPhotoCropper">
                    <img v-if="Api_POST_RoomCreateDto.imagePath" class="show_img" :src="getStaticPhotoUrl(Api_POST_RoomCreateDto.imagePath)" @error="errorPhoto">
                    <i v-else class="el-icon-plus" />
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="18" style="">
              <div style="margin-top:110px">
                <span class="tip_info_style">文件格式：jpg、jpeg、png</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="房型名称" prop="name">
                <el-input v-model="Api_POST_RoomCreateDto.name" placeholder="请输入" type="text" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="早餐选择" prop="breakfastTypeCode">
                <el-select v-model="Api_POST_RoomCreateDto.breakfastTypeCode" placeholder="请选择" style="width:100%" size="mini">
                  <el-option v-for="item in dict.breakfastType" :key="item.code" :value="item.code" :label="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="床型选择" prop="bedTypeId">
                <el-select v-model="Api_POST_RoomCreateDto.bedTypeId" placeholder="请选择" style="width:74%" size="mini">
                  <el-option v-for="item in bedList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-button type="text" style="padding: 9px 0 0 10px" @click="openBedType()">+添加床型</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="入住人数" prop="personCount">
                <el-input-number v-model="Api_POST_RoomCreateDto.personCount" size="mini" :precision="0" controls-position="right" :min="1" style="width:71%;margin-right: 5px" /> 人
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建筑面积">
                <el-input-number v-model="Api_POST_RoomCreateDto.area" size="mini" :precision="0" controls-position="right" :min="1" style="width:71%;margin-right: 5px" /> 平米
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否有窗" prop="hasWindow">
                <el-select v-model="Api_POST_RoomCreateDto.hasWindow" placeholder="请选择" style="width:100%" size="mini">
                  <el-option v-for="item in windowstList" :key="item.code" :value="item.code" :label="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogVisible = false">{{ $t('button.cancel') }}</el-button>
        <!-- 保存按钮 -->
        <el-button v-if="type == 'edit'" type="primary" :loading="submitLoading" size="mini" @click="saveEdit()">确 定</el-button>
        <!-- 保存按钮 -->
        <el-button v-else type="primary" :loading="submitLoading" size="mini" @click="saveNew()">确 定</el-button>
      </span>
      <!-- 二级弹框 -->
      <el-dialog width="440px" title="添加床型" :visible.sync="innerVisible" append-to-body>
        <el-form ref="Api_POST_BedTypeCreateDto" :model="Api_POST_BedTypeCreateDto" :rules="Api_POST_BedTypeCreateDto_Rules" class="gl_form_mini" label-position="right" label-width="120px" style="padding-right: 30px;">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="床型名称" prop="name">
                <el-input v-model="Api_POST_BedTypeCreateDto.name" placeholder="请输入床型名称" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <!-- 取消按钮 -->
          <el-button size="mini" @click="innerVisible = false">{{ $t('button.cancel') }}</el-button>
          <!-- 保存按钮 -->
          <el-button type="primary" :loading="submitLoading_room" size="mini" @click="saveNewBedType()">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import validator from '@/lib/validate/index.js';
import defaultHotelImg from '@/assets/images/face_default.png';
import { SiSTKWEventsManagementRoomCreateDto, SiSTKWEventsManagementBedTypeCreateDto } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementBedType,
  api_POST_EventsManagementBedType,
  api_GET_EventsManagementRoomId
} from '@/extend/api/gameswaggerApi/app.js';
import photoCropperDialog from '../photoCropperDialog';
import { CopyData } from '@/lib';

export default {
  name: 'EditHotel',
  components: {
    photoCropperDialog
  },
  props: {
    district: {
      type: Array,
      default() {
        return [];
      }
    },
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    dictAll: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      roomTypeName: '', // 床型名称
      Api_POST_RoomCreateDto: new SiSTKWEventsManagementRoomCreateDto(),
      Api_POST_BedTypeCreateDto: new SiSTKWEventsManagementBedTypeCreateDto(),
      photoCropperVisible: false, // 上传图片窗口的显示与隐藏
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      windowstList: [
        {
          code: true,
          value: '有窗'
        },
        {
          code: false,
          value: '无窗'
        }
      ],
      photoCropperOption: {
        img: '',
        autoCropWidth: '213px',
        autoCropHeight: '200px',
        enlarge: 1,
        fixedNumber: [213, 200]
      },
      Api_POST_RoomCreateDto_Rules: { // 必填项，验证密码格式
        imagePath: [
          { required: true, message: '请上传房型照片', trigger: 'blur' }
        ],
        name: [
          // 房型名称不能为空
          validator.required('房型名称不能为空')
        ],
        // 早餐选择
        breakfastTypeCode: [
          {
            required: true,
            message: '早餐选择不能为空', // 早餐选择不能为空
            trigger: 'change'
          }
        ],
        // 床型选择
        bedTypeId: [
          {
            required: true,
            message: '床型选择不能为空', // 床型选择不能为空
            trigger: 'change'
          }
        ],
        personCount: [
          validator.required('入住人数不能为空')
        ]
      },
      Api_POST_BedTypeCreateDto_Rules: { // 必填项，验证密码格式
        name: [
          validator.required('床型名称不能为空')
        ]
      },
      title: '',
      loading: false,
      submitLoading: false,
      submitLoading_room: false,
      dialogVisible: false,
      innerVisible: false,
      editionList: [],
      bedList: [],
      cascaderKey: null, // 用于重置级联选择器
      type: '', // 弹框状态，是新增和是修改 new 是新增，edit是修改
      rowId: '' // 编辑时候的id
    };
  },
  computed: {
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['Api_POST_RoomCreateDto'].resetFields();
      }
    }
  },
  methods: {
    // 根据用户id获取信息
    api_GET_EventsManagementRoomId() {
      api_GET_EventsManagementRoomId(this.rowId).then(res => {
        CopyData(res, this.Api_POST_RoomCreateDto);
        this.loading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.loading = false;
      });
    },
    // 获取床型信息
    GetEventsManagementBedType() {
      api_GET_EventsManagementBedType({ IsDefault: null }).then(res => {
        this.bedList = res.items;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    open(row, type) {
      this.loading = true;
      this.type = type;
      this.title = type === 'edit' ? '编辑房型' : '添加房型';
      this.rowId = row ? row.id : '';
      this.GetEventsManagementBedType();
      if (this.type === 'edit') {
        this.api_GET_EventsManagementRoomId();
      } else {
        this.Api_POST_RoomCreateDto = new SiSTKWEventsManagementRoomCreateDto();
        this.Api_POST_BedTypeCreateDto = new SiSTKWEventsManagementBedTypeCreateDto();
        this.$set(this.Api_POST_RoomCreateDto, 'hasWindow', true);
        console.log(this.Api_POST_RoomCreateDto);
        this.loading = false;
      }
      this.$nextTick(() => {
        this.dialogVisible = true;
      });
    },
    // 新增
    saveNew() {
      console.log(this.Api_POST_RoomCreateDto);
      const returnData = new SiSTKWEventsManagementRoomCreateDto();
      CopyData(this.Api_POST_RoomCreateDto, returnData);
      returnData.hotelId = this.rowId;
      this.submitLoading = true;
      this.$refs.Api_POST_RoomCreateDto.validate(valid => {
        if (valid) {
          this.$emit('insert', returnData);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 修改
    saveEdit() {
      console.log(this.Api_POST_RoomCreateDto);
      const returnData = new SiSTKWEventsManagementRoomCreateDto();
      CopyData(this.Api_POST_RoomCreateDto, returnData);
      this.submitLoading = true;
      this.$refs.Api_POST_RoomCreateDto.validate(valid => {
        if (valid) {
          this.$emit('update', returnData);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 添加床型弹框
    openBedType() {
      const _this = this;
      this.Api_POST_BedTypeCreateDto = new SiSTKWEventsManagementBedTypeCreateDto();
      _this.innerVisible = true;
    },
    // 添加床型保存
    saveNewBedType() {
      const _this = this;
      _this.submitLoading_room = true;
      this.Api_POST_BedTypeCreateDto.isDefault = null;
      this.$refs.Api_POST_BedTypeCreateDto.validate(valid => {
        api_POST_EventsManagementBedType(this.Api_POST_BedTypeCreateDto).then(res => {
          _this.$message({
            type: 'success',
            message: '添加床型成功！'
          });
          _this.GetEventsManagementBedType();
          _this.submitLoading_room = false;
          _this.innerVisible = false;
        }, error => {
          _this.submitLoading_room = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    // 获取静态文件
    getStaticPhotoUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 点击保存照片裁剪窗口
    photoCropperSave (fileUrl) {
      this.$set(this.Api_POST_RoomCreateDto, 'imagePath', fileUrl.tempUrl);
    },
    // 点击打开照片裁剪窗口
    openPhotoCropper () {
      this.$refs.photoCropper.open(this.Api_POST_RoomCreateDto.imagePath);
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    }
  }
};
</script>
<style lang="scss" scoped>
  .tip_info_style {
    // padding: 0 10px 0 30px;
    font-size: 14px;
    color: #C0C4CC;
  }
  .personalUserInfo_img_wrap .el-form-item__error {
    padding-left: 10px;
  }
  .upload_game_img.no_pointer {
    cursor: default;
  }
  .upload_game_img {
    width: 102px;
    height: 96px;
    line-height: 94px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: middle;
  }
</style>
